<template>
  <div class="fron">
    <loading :state="state"></loading>
    <banner :banner="banner"></banner>
    <div class="man">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
      >
        <van-cell
          v-for="(good, key) in goodsAll"
          :key="key"
          class="cell"
        >
          <!--<single-good :good="good" region="normal"></single-good>-->
          <div class="item" :class="key===0 ? 'chek-i':'chek-n'" @click="toDetail(good.id,'normal')">
            <div class="item-l">
              <img :src="good.pic" alt="">
            </div>
            <div class="item-r">
              <p class="p1 line16" style="font-weight: bold">{{good.name}}</p>
              <p class="p2 line14">产品卖点产品卖点</p>
              <p class="p3 line18" style="font-weight: bold">爱就购买绝对划算</p>
              <div class="line-fi"></div>
              <div class="item-lin">
                <img src="../../assets/img/item_d.jpg" alt="">
                <span>销售卖点</span>
                <img src="../../assets/img/item_d.jpg" alt="">
                <span>销售卖点</span>
                <img src="../../assets/img/item_d.jpg" alt="">
                <span>销售卖点</span>
              </div>
              <div class="item-tt">
                <div class="tt-l">
                  <p class="p4">薪年价:</p>
                  <p class="p5" style="font-weight: bold">满减后</p>
                </div>
                <p class="p6" style="font-weight: bold">{{good.price}}</p>
                <div class="tt-r">
                  <div class="tt-rt">立即抢购</div>
                  <p class="p4" style="text-decoration:line-through">原价:{{good.line}}</p>
                </div>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
      <!--<p v-if="finished" class="no-more">敬请期待更多产品</p>-->
      <div v-for="(item,index) in dataGood" :key="index">
        <div class="nav">
          <img src="../../assets/img/1.png" alt="">
          <p class="p7">{{item.name}}</p>
          <img src="../../assets/img/1.png" alt="">
        </div>
        <div class="list">
          <div class="list-it" v-for="(val,index2) in item.good" :key="index2" @click="toDetail(val[0].id,'normal')">
            <img :src="val[0].pic" alt="">
            <div class="list-tt">
              <img class="line-1" src="../../assets/img/item2-li.jpg" alt="">
              <p class="p2">{{val[0].name}}</p>
              <img class="line-1" src="../../assets/img/item2-li.jpg" alt="">
            </div>
            <div class="item-tt">
              <div class="tt-l">
                <p class="p4">薪年价:</p>
                <p class="p5" style="font-weight: bold">满减后</p>
              </div>
              <p class="p6" style="font-weight: bold">{{val[0].price}}</p>
              <div class="tt-r">
                <div class="tt-rt">立即抢购</div>
                <p class="p4" style="text-decoration:line-through">原价:{{val[0].line}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="nav" @click="scrollTop" style="padding-bottom: 6vw">
        <img src="../../assets/img/1.png" alt="">
        <p class="p7">返回顶部</p>
        <img src="../../assets/img/1.png" alt="">
      </div>
    </div>
  </div>
</template>
<div>
</div>
<script>
  import Banner from '../../components/sale/banner.vue';

  export default {
    /**
     * 测试首页
     */
    name: 'demoFront',
    components: {
      Banner
    },
    data() {
      return {
        banner: [],
        loading: false,
        finished: false,
        goodAll: [], // 分区商品
        goodsAll: [], // 全部商品
        page: 0,
        category: [],
        dataGood: [], // 组装后的个人类商品数据
        state: true
      };
    },
    created() {
    },
    methods: {
      compareVal(value) {
        // 按权重排序
        value.sort(function compare(obj1, obj2) {
          let val1 = parseInt(obj1.weight);
          let val2 = parseInt(obj2.weight);
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        });
      },
      scrollTop() {
        //  返回顶部
        let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
        if (currentScroll > 0) {
          window.requestAnimationFrame(this.scrollTop);
          window.scrollTo(0, currentScroll - (currentScroll / 5));
        }
      },
      onLoad() {
        let that = this;
        if (this.finished === false) {
          // 异步更新数据
          setTimeout(() => {
            let all = {
              page: that.page,
              size: 8,
              type: 'simple'
            };
            that.$Sale.getAllGoods(all).then(res => {
              this.page++;
              that.goodsAll = that.goodsAll.concat(res.data);
              if (res.data.length === 0) {
                that.finished = true;
              }
              this.loading = false;
              this.state = false;
            }, () => {
            });
          }, 500);
          this.asseModel();
        }
      },
      asseModel() {
        // 组装数据
        for (let key in this.category) {
          // console.log(this.category[key].product);
          // for (let key2 in this.goodsAll) {
          //   console.log(this.goodsAll[key2]);
          // }
          let good = [];
          for (let key2 in this.category[key].product) {
            // good[val] = this.goodsAll.filter(item => item.id === val);
            good[key2] = this.goodsAll.filter(item =>
              item.id === this.category[key].product[key2]
            );
          }
          this.dataGood[key] = {name: this.category[key].name, good: good};
        }
      },
      toDetail(id, region) {
        // 跳转详情页面
        this.$store.commit('region', region);
        this.$router.push(
          {
            name: 'good-detail',
            query: {
              id: id,
              region: this.region
            }
          });
      }
    },
    mounted() {
      // 获取轮播图，分区，分类数据
      this.$Sale.getAllList().then(res => {
        this.banner = res.data.slider;
        this.nav = res.data.nav;
        this.category = res.data.category; // 分区产品标题和产品id
        this.compareVal(this.nav);
        this.goodAll = res.data.region;
        this.compareVal(this.goodAll);
      }, () => {
      });
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .fron {
    min-height 100vh
    background: linear-gradient(to bottom right, #923df0, #721fd9); /* 标准的语法（必须放在最后） */

    .man {
      min-height 100vh
      .chek-i {
        background url("../../assets/img/bit.png") no-repeat
      }
      .chek-n {
        background url("../../assets/img/bno.png") no-repeat
      }
      .item {
        /*background url("../../assets/img/bit.png") no-repeat*/
        background-size 100%
        width 100%
        height 54vw
        flex-x(space-between, stretch)
        padding 4vw 4vw 0
        box-sizing border-box

        .item-l {
          flex-x(center)
          padding-left 2vw
          img {
            width 34vw
          }
        }

        .item-r {
          flex 1
          padding 6vw 2vw 0 0
          flex-y(flex-start, flex-end)

          .line-fi {
            width 70%
            height 1px
            background #000
          }

          .item-lin {
            flex-x(space-between)
            width 80%

            img {
              width 3vw
            }

            span {
              word-vw(8, #000)
              flex 1
            }
          }

          .item-tt {
            flex-x(flex-start, center)
            margin-top 3vw
            .tt-l {
              flex-y(, flex-end)
            }

            .tt-r {
              flex-y(space-between)
              height 6vw
              .tt-rt {
                background gray6
                padding 1vw 2vw
                word-vw(6, #fff)
                line-height 1
              }
            }
          }
        }
      }

      .nav {
        flex-x(center)
        height 10vw

        p {
          padding 0 3vw
        }
      }

      .list {
        flex-x(flex-start)
        flex-flow row wrap
        padding 3vw 1vw

        .list-it {
          width 47vw
          height 70vw
          margin 0 1vw
          background url("../../assets/img/item2.png") no-repeat
          background-size contain
          flex-y()

          img {
            width 36vw
          }

          .list-tt {
            margin-top 2vw
            flex-y()
            .line-1 {
              height 1px
            }
            p {
              line-height 6vw
            }
          }

          .item-tt {
            flex-x(flex-start, center)
            height 10vw

            .tt-l {
              flex-y(, flex-end)
              height 6vw
            }

            .tt-r {
              flex-y(space-between)
              height 6vw

              .tt-rt {
                background gray6
                padding 1vw 2vw
                word-vw(6, #fff)
              }
            }
          }
        }
      }
    }
    .van-cell >>> {
      padding 0
    }
    .van-cell >>> {
      background none
    }
    .demo {
      width 100%
    }
  }
</style>
